<template>
    <div class="command-center">
        <!-- 顶部区域 -->
        <header class="top-header">
            <!-- 左上角 LOGO -->
            <div class="logo-section">
                <svg class="logo-icon" viewBox="0 0 40 40">
                    <circle cx="20" cy="20" r="18" fill="none" stroke="#00ff88" stroke-width="2" />
                    <path d="M12 20 L20 12 L28 20 L20 28 Z" fill="#00ff88" opacity="0.3" />
                    <circle cx="20" cy="20" r="3" fill="#00ff88" />
                </svg>
                <div class="logo-text">
                    <h1>观音湖AAAA景区智慧景区指挥中心</h1>
                    <p>Guanyin Lake Smart Scenic Command Center</p>
                </div>
            </div>

            <!-- 右上角导航菜单 -->
            <nav class="top-nav">
                <div class="nav-item" :class="{ active: activeTopNav === 'realtime' }"
                    @click="switchTopNav('realtime')">
                    <svg viewBox="0 0 24 24">
                        <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z" fill="currentColor" />
                    </svg>
                    <span>实时数据</span>
                </div>
                <div class="nav-item" :class="{ active: activeTopNav === 'monitor' }" @click="switchTopNav('monitor')">
                    <svg viewBox="0 0 24 24">
                        <path
                            d="M20 4h-3.17L15 2H9L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"
                            fill="currentColor" />
                    </svg>
                    <span>视频监控</span>
                </div>
                <div class="nav-item" :class="{ active: activeTopNav === 'broadcast' }"
                    @click="switchTopNav('broadcast')">
                    <svg viewBox="0 0 24 24">
                        <path
                            d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"
                            fill="currentColor" />
                    </svg>
                    <span>广播调度</span>
                </div>
                <!-- <div class="nav-item" :class="{ active: activeTopNav === 'governance' }" @click="switchTopNav('governance')">
          <svg viewBox="0 0 24 24">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor"/>
          </svg>
          <span>数智治理</span>
        </div> -->
            </nav>
        </header>

        <!-- 主体内容区域 -->
        <main class="main-content">
            <!-- 实时数据页面 -->
            <template v-if="activeTopNav === 'realtime'">
                <!-- 左侧数据面板 -->
                <aside class="left-panels">
                    <div class="data-overview">
                        <div class="data-panels">
                            <div class="data-panel" v-for="(panel, index) in leftPanels" :key="index">
                                <h3 class="panel-title">{{ panel.title }}</h3>
                                <div class="panel-content">
                                    <component :is="componentMapping[panel.component]" :data="panel.data" />
                                </div>
                            </div>
                        </div>
                    </div>
                </aside>

                <!-- 中心区域 - 交互式高德地图 -->
                <div class="center-area">
                    <div class="map-container">
                        <div class="map-content">
                            <AmapView :active-type="activeMapControl" @poi-selected="handlePoiSelected"
                                @stats-updated="handleStatsUpdated" />
                        </div>

                        <!-- 地图底部控制菜单 -->
                        <div class="map-bottom-controls">
                            <div class="control-item" v-for="control in mapControls" :key="control.id"
                                :class="{ active: activeMapControl === control.id }"
                                @click="switchMapControl(control.id)">
                                <div class="control-icon">
                                    <svg viewBox="0 0 24 24">
                                        <path :d="control.icon" fill="currentColor" />
                                    </svg>
                                </div>
                                <span>{{ control.label }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 右侧游客图谱 -->
                <aside class="right-panels">
                    <div class="visitor-profile">
                        <!-- <h2 class="profile-title">游客图谱</h2> -->
                        <div class="profile-panels">
                            <div class="profile-panel" v-for="(panel, index) in rightPanels" :key="index">
                                <h3 class="panel-title">{{ panel.title }}</h3>
                                <div class="panel-content">
                                    <component :is="componentMapping[panel.component]" :data="panel.data" />
                                </div>
                            </div>
                        </div>
                    </div>
                </aside>
            </template>

            <!-- 视频监控页面 -->
            <template v-if="activeTopNav === 'monitor'">
                <VideoMonitorView />
            </template>

            <!-- 广播调度页面 -->
            <template v-if="activeTopNav === 'broadcast'">
                <BroadcastScheduleView />
            </template>

            <!-- 数智治理页面 -->
            <template v-if="activeTopNav === 'governance'">
                <DataGovernanceView />
            </template>
        </main>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import FlowChart from '@/components/charts/FlowChart.vue'
import DeviceGauge from '@/components/charts/DeviceGauge.vue'
import DensityHeatmap from '@/components/charts/DensityHeatmap.vue'
import VisitorFlow from '@/components/charts/VisitorFlow.vue'
import VisitorSource from '@/components/charts/VisitorSource.vue'
import GenderChart from '@/components/charts/GenderChart.vue'
import ConsumptionChart from '@/components/charts/ConsumptionChart.vue'
import ChannelChart from '@/components/charts/ChannelChart.vue'
import EnvironmentPanel from '@/components/charts/EnvironmentPanel.vue'
import StatisticsPanel from '@/components/charts/StatisticsPanel.vue'
import VisitorProfilePanel from '@/components/charts/VisitorProfilePanel.vue'
import PatrolStatisticsPanel from '@/components/charts/PatrolStatisticsPanel.vue'
import AmapView from '@/components/maps/AmapView.vue'
import VideoMonitorView from '@/components/views/VideoMonitorView.vue'
import BroadcastScheduleView from '@/components/views/BroadcastScheduleView.vue'
import DataGovernanceView from '@/components/views/DataGovernanceView.vue'

import api from '@/api'

import useDataStore from '@/stores/data.js';
import { storeToRefs } from 'pinia';
const store = useDataStore();
const { amapPoiData, listTypes, patrolPlans } = storeToRefs(store)
import { checkpointIcons } from '@/components/maps/patrolData.js'

// 响应式数据
const activeTopNav = ref('realtime')
const activeMapControl = ref('all') // 默认显示所有POI

// 顶部导航菜单
const topNavItems = ref([
    {
        id: 'realtime',
        label: '实时数据',
        icon: 'M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z'
    },
    {
        id: 'monitor',
        label: '视频监控',
        icon: 'M4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H16V20A1,1 0 0,1 15,21H9A1,1 0 0,1 8,20V18H4A2,2 0 0,1 2,16V4A2,2 0 0,1 4,2M4,4V16H20V4H4M18.5,7A0.5,0.5 0 0,0 18,7.5A0.5,0.5 0 0,0 18.5,8A0.5,0.5 0 0,0 19,7.5A0.5,0.5 0 0,0 18.5,7Z'
    },
    {
        id: 'broadcast',
        label: '广播调度',
        icon: 'M3,9V15H7L12,20V4L7,9H3M16.5,12C16.5,10.23 15.48,8.71 14,7.97V16.02C15.48,15.29 16.5,13.77 16.5,12M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.85 14,18.71V20.77C18.01,19.86 21,16.28 21,12C21,7.72 18.01,4.14 14,3.23Z'
    },
    {
        id: 'governance',
        label: '数智治理',
        icon: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'
    }
])



let timer = null

// 生命周期
onMounted(async () => {
    getAllData()

    // timer = setInterval(() => {
    //     getAllData()
    // }, 30000);

    // 初始化滚动优化
    initScrollOptimization()
})

onUnmounted(() => {
    if (timer) {
        clearInterval(timer)
    }
})


const getPatrolPlans = async () => {
    try {
        // 巡检计划
        const listPlans = await api.exampleApi.listPlans({ page: 1, pageSize: 1000 })
        console.log('巡检计划:', listPlans)
        // 巡检设备
        const listDevices = await api.exampleApi.listDevices({ page: 1, pageSize: 1000 })
        console.log('巡检设备:', listDevices)
        // 巡检设备类型
        const listDeviceTypes = await api.exampleApi.listDeviceTypes({ page: 1, pageSize: 1000 })
        // console.log('巡检设备类型:', listDeviceTypes)

        // 创建设备映射表，便于根据ID快速查找设备信息
        const deviceMap = {}
        if (listDevices?.list) {
            listDevices.list.forEach(device => {
                deviceMap[device.id] = device
            })
        }


        // 设备类型映射
        const deviceTypeMap = {
            1: { type: 'security', deviceType: '监控摄像头' },
            2: { type: 'emergency', deviceType: '广播设备' },
            3: { type: 'security', deviceType: '安防摄像头' },
            // 可以根据实际type_id扩展更多类型
        }

        // 巡检周期映射
        const getCycleText = (cycle) => {
            const cycleMap = {
                1: '每日',
                2: '每周',
                3: '每月',
            }
            return cycleMap[cycle] || `每日`
        }

        // 优先级映射
        const getPriority = (cycle) => {
            if (cycle <= 1) return 'high'
            if (cycle <= 3) return 'medium'
            return 'low'
        }

        // 转换巡检计划数据
        const transformedPlans = []
        if (listPlans?.list) {
            listPlans.list.forEach(plan => {
                // 获取巡检计划对应的设备列表
                const checkpoints = []
                if (plan.devices && Array.isArray(plan.devices)) {
                    plan.devices.forEach((deviceId, index) => {
                        const device = deviceMap[deviceId]
                        if (device) {
                            const deviceTypeInfo = deviceTypeMap[device.type_id] || { type: 'service', deviceType: '设备' }

                            checkpoints.push({
                                id: device.id,
                                name: device.name,
                                type: device.type_id,
                                coordinates: {
                                    lng: parseFloat(device.latitude), // 注意：接口返回的latitude对应经度
                                    lat: parseFloat(device.longitude)  // 注意：接口返回的longitude对应纬度
                                },
                                deviceType: `${device.model} - ${checkpointIcons[device.type_id]?.name}`,
                                description: `检查${device.name}设备运行状态，海拔${device.altitude}米`
                            })
                        }
                    })
                }

                // 计算路线统计信息
                const deviceCount = checkpoints.length
                const estimatedDistance = (deviceCount * 0.5).toFixed(1) // 每个设备间平均500米
                const estimatedDuration = Math.ceil(deviceCount * 10) // 每个设备检查8分钟

                // 处理巡检人员
                let personText = '未指定'
                if (plan.person) {
                    if (Array.isArray(plan.person)) {
                        personText = plan.person.join('、')
                    } else if (typeof plan.person === 'string') {
                        personText = plan.person
                    }
                }

                transformedPlans.push({
                    id: plan.id,
                    name: plan.name,
                    description: `巡检人员：${personText}，包含${deviceCount}个检查点`,
                    cycle: getCycleText(plan.cycle),
                    deviceCount: `${deviceCount}个`,
                    estimatedDuration: `${estimatedDuration}分钟`,
                    priority: getPriority(plan.cycle),
                    checkpoints: checkpoints
                })
            })
        }

        console.log('转换后的巡检计划:', transformedPlans)
        patrolPlans.value = transformedPlans
    } catch (error) {
        console.error('获取巡检计划列表失败:', error)

    }
}

const getAllData = async () => {
    // 获取位置列表
    const positions = await api.exampleApi.listSpotPositions()
    // 获取点位列表
    const res = await api.exampleApi.listSpots()

    // 获取点位类型列表
    const res2 = await api.exampleApi.listTypes()
    listTypes.value = res2.list

    amapPoiData.value = res.list.map(item => {
        // 点位映射位置
        const position = positions.list.find(p => p.id === item.position_id)
        // 字符串转数字
        let longitude = position ? parseFloat(position.longitude) : 0
        let latitude = position ? parseFloat(position.latitude) : 0

        const curType = listTypes.value.find(h => h.id == item.type_id)
        return {
            id: item.id,
            name: item.name,
            type: item.type_id,
            typeName: curType?.name || "其他",
            coordinates: {
                lng: longitude,
                lat: latitude
            },
            status: 'active',
            isAlert: false,
            data: {
                currentVisitors: 156,  // 当前游客数
                capacity: 400,  // 最大容量
                temperature: 24,  // 温度
                humidity: 68,  // 湿度
                address: item.position_name || '',
                description: item.intro_title
            }
        }
    })

    getPatrolPlans()
}


// 切换顶部导航
const switchTopNav = (navId) => {
    activeTopNav.value = navId
}

// 处理POI选择
const handlePoiSelected = (poi) => {
    // 处理POI选择逻辑
    console.log('POI选中:', poi)
}

// 处理统计更新
const handleStatsUpdated = (stats) => {
    // 处理统计数据更新
    console.log('统计更新:', stats)
}

// 左侧面板数据
const leftPanels = ref([
    {
        title: '关键指标概览',
        component: 'StatisticsPanel',
        data: {}
    },
    {
        title: '实时客流统计',
        component: 'FlowChart',
        data: {
            categories: ['观音湖', '梵音寺', '湖心岛', '游客中心', '停车场'],
            series: [{
                name: '实时人数',
                data: [320, 145, 198, 87, 156],
                color: '#00ff88'
            }]
        }
    },
    {
        title: '设备运行状态',
        component: 'DeviceGauge',
        data: {
            value: 94.1,
            name: '设备在线率',
            online: 47,
            offline: 3,
            total: 50
        }
    }
])

// 右侧游客图谱数据
const rightPanels = ref([
    {
        title: '安全巡检统计',
        component: 'PatrolStatisticsPanel',
        data: {}
    },
    // {
    //     title: '游客行为分析',
    //     component: 'VisitorProfilePanel',
    //     data: {}
    // },
    // {
    //     title: '游客来源地分布',
    //     component: 'VisitorSource',
    //     data: [
    //         { name: '四川省', value: 45, color: '#00ff88' },
    //         { name: '重庆市', value: 18, color: '#00bcd4' },
    //         { name: '云南省', value: 12, color: '#ffab40' },
    //         { name: '贵州省', value: 10, color: '#66bb6a' },
    //         { name: '陕西省', value: 8, color: '#ff7043' },
    //         { name: '湖北省', value: 7, color: '#9c27b0' }
    //     ]
    // },
    // {
    //     title: '游客性别年龄分布',
    //     component: 'GenderChart',
    //     data: {
    //         male: 58,
    //         female: 42,
    //         ageGroups: [
    //             { name: '18-25岁', value: 32, color: '#00ff88' },
    //             { name: '26-35岁', value: 28, color: '#00bcd4' },
    //             { name: '36-45岁', value: 22, color: '#ffab40' },
    //             { name: '46-60岁', value: 13, color: '#66bb6a' },
    //             { name: '60岁以上', value: 5, color: '#ff7043' }
    //         ]
    //     }
    // },
    // {
    //     title: '游客消费统计',
    //     component: 'ConsumptionChart',
    //     data: {
    //         average: 268,
    //         total: 687520,
    //         categories: [
    //             { name: '门票', value: 33.2 },
    //             { name: '餐饮', value: 23.7 },
    //             { name: '住宿', value: 17.3 },
    //             { name: '购物', value: 12.1 },
    //             { name: '娱乐', value: 8.5 },
    //             { name: '交通', value: 5.2 }
    //         ]
    //     }
    // },
    // {
    //     title: '游客来源渠道',
    //     component: 'ChannelChart',
    //     data: [
    //         { name: '在线预订', value: 45, color: '#00ff88' },
    //         { name: '现场购票', value: 28, color: '#00bcd4' },
    //         { name: '旅行社', value: 15, color: '#ffab40' },
    //         { name: '团购平台', value: 12, color: '#66bb6a' }
    //     ]
    // }
])



// 初始化滚动优化
const initScrollOptimization = () => {
    const leftPanel = document.querySelector('.left-panels')
    const rightPanel = document.querySelector('.right-panels')

    // 优化滚动性能
    const optimizeScroll = (element) => {
        if (!element) return

        let scrollTimeout

        // 只监听滚动事件来添加视觉效果，不干预滚动行为
        element.addEventListener('scroll', () => {
            // 添加滚动中的样式
            element.classList.add('scrolling')

            // 清除之前的定时器
            clearTimeout(scrollTimeout)

            // 滚动结束后移除样式
            scrollTimeout = setTimeout(() => {
                element.classList.remove('scrolling')
            }, 150)
        }, { passive: true })

        // 移除原来干预wheel事件的代码，让浏览器处理原生滚动
        // 这样可以保证滚动的流畅性和兼容性
    }

    optimizeScroll(leftPanel)
    optimizeScroll(rightPanel)
}

// 组件映射
const componentMapping = {
    'FlowChart': FlowChart,
    'DeviceGauge': DeviceGauge,
    'DensityHeatmap': DensityHeatmap,
    'VisitorFlow': VisitorFlow,
    'VisitorSource': VisitorSource,
    'GenderChart': GenderChart,
    'ConsumptionChart': ConsumptionChart,
    'ChannelChart': ChannelChart,
    'EnvironmentPanel': EnvironmentPanel,
    'StatisticsPanel': StatisticsPanel,
    'VisitorProfilePanel': VisitorProfilePanel,
    'PatrolStatisticsPanel': PatrolStatisticsPanel
}

// 地图控制逻辑
const mapControls = ref([
    {
        id: 'all',
        label: '全部POI',
        icon: 'M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z'
    },
    {
        id: 1,
        label: '监控',
        icon: 'M4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H16V20A1,1 0 0,1 15,21H9A1,1 0 0,1 8,20V18H4A2,2 0 0,1 2,16V4A2,2 0 0,1 4,2M4,4V16H20V4H4M18.5,7A0.5,0.5 0 0,0 18,7.5A0.5,0.5 0 0,0 18.5,8A0.5,0.5 0 0,0 19,7.5A0.5,0.5 0 0,0 18.5,7Z'
    },
    {
        id: 2,
        label: '商业',
        icon: 'M19,7H18V6A2,2 0 0,0 16,4H8A2,2 0 0,0 6,6V7H5A1,1 0 0,0 4,8V19A3,3 0 0,0 7,22H17A3,3 0 0,0 20,19V8A1,1 0 0,0 19,7M8,6H16V7H8V6M18,19A1,1 0 0,1 17,20H7A1,1 0 0,1 6,19V9H18V19Z'
    },
    {
        id: 3,
        label: '公共服务',
        icon: 'M12,1L21,5V11C21,16.55 17.16,21.74 12,23C6.84,21.74 3,16.55 3,11V5L12,1M12,7C10.9,7 10,7.9 10,9C10,10.1 10.9,11 12,11C13.1,11 14,10.1 14,9C14,7.9 13.1,7 12,7M12,13C10.67,13 8,13.67 8,15V16H16V15C16,13.67 13.33,13 12,13Z'
    },
    {
        id: 4,
        label: '环境监测',
        icon: 'M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 2,11.5 2,13.5C2,15.5 3.75,17.25 3.75,17.25C7,8 17,8 17,8Z'
    },
    {
        id: 5,
        label: '广播',
        icon: 'M3,9V15H7L12,20V4L7,9H3M16.5,12C16.5,10.23 15.48,8.71 14,7.97V16.02C15.48,15.29 16.5,13.77 16.5,12M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.85 14,18.71V20.77C18.01,19.86 21,16.28 21,12C21,7.72 18.01,4.14 14,3.23Z'
    },
    {
        id: 8,
        label: '出入口',
        icon: 'M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,19H5V5H19V19M11,7H13V17H11V7Z'
    }
])

// 切换地图控制
const switchMapControl = (controlId) => {
    activeMapControl.value = controlId
}
</script>

<style scoped>
/* CSS变量定义 */
:root {
    --primary-green: #00ff88;
    --secondary-green: #00d4aa;
    --accent-green: #4caf50;
    --dark-green: #1b5e20;
    --light-green: #e8f5e8;
    --water-blue: #00bcd4;
    --nature-gold: #ffab40;
    --bg-primary: rgba(13, 27, 42, 0.95);
    --bg-secondary: rgba(0, 50, 30, 0.85);
    --glass-bg: rgba(0, 255, 136, 0.08);
    --border-color: rgba(0, 255, 136, 0.3);
}

.command-center {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg,
            rgba(13, 27, 42, 0.95) 0%,
            rgba(0, 50, 30, 0.85) 50%,
            rgba(13, 27, 42, 0.95) 100%),
        url('@/assets/images/jingqu.jpg') center center / cover no-repeat;
    color: #ffffff;
    overflow: hidden;
    position: relative;
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.command-center::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center,
            rgba(0, 255, 136, 0.1) 0%,
            rgba(0, 50, 30, 0.3) 50%,
            rgba(13, 27, 42, 0.4) 100%);
    z-index: 0;
}

/* 顶部区域样式 */
.top-header {
    position: relative;
    z-index: 10;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    background: linear-gradient(180deg,
            rgba(0, 255, 136, 0.15) 0%,
            rgba(0, 255, 136, 0.05) 100%);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
}

/* LOGO区域 */
.logo-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo-icon {
    width: 50px;
    height: 50px;
    filter: drop-shadow(0 0 10px var(--primary-green));
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.logo-text h1 {
    font-size: 1.8rem;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 0 20px var(--primary-green);
    letter-spacing: 0.1em;
}

.logo-text p {
    font-size: 0.9rem;
    color: var(--primary-green);
    margin: 0;
    opacity: 0.8;
}

/* 顶部导航 */
.top-nav {
    display: flex;
    gap: 1rem;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.8rem 1.2rem;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    min-width: 80px;
}

.nav-item:hover,
.nav-item.active {
    background: rgba(0, 255, 136, 0.2);
    border-color: var(--primary-green);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 255, 136, 0.3);
}

.nav-item svg {
    width: 20px;
    height: 20px;
    color: var(--primary-green);
}

.nav-item span {
    font-size: 0.85rem;
    color: #ffffff;
    white-space: nowrap;
}

/* 主体内容区域 */
.main-content {
    position: relative;
    z-index: 1;
    height: calc(100vh - 80px);
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    overflow: hidden;

    /* 确保子元素能够正确伸缩 */
    align-items: stretch;
}

/* 左侧面板 - 固定在左边 */
.left-panels {
    /* 设置固定宽度范围，但允许弹性 */
    flex: 0 0 auto;
    width: 19.1%;
    /* 基础宽度为19.1% - 黄金分割比例 */
    min-width: 240px;
    max-width: 380px;

    overflow-y: auto;
    overflow-x: hidden;
    /* 明确隐藏水平滚动 */
    padding-right: 8px;
    /* 给隐藏的滚动条留出空间 */

    /* 完全隐藏滚动条 - 针对所有浏览器 */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */

    /* 滚动阴影效果 */

    background-size: 100% 40px, 100% 40px;
    background-repeat: no-repeat;
    background-attachment: local, local;

    /* 添加渐变边框效果 */
    position: relative;
}

/* 中心区域 - 撑满剩余空间 */
.center-area {
    /* 让中间区域占据所有剩余空间 - 约61.8%（黄金分割比例） */
    flex: 1 1 auto;
    min-width: 0;
    /* 确保flex item能够收缩 */

    background: rgba(0, 255, 136, 0.02);
    border: 1px solid rgba(0, 255, 136, 0.15);
    border-radius: 20px;
    overflow: hidden;
    backdrop-filter: blur(2px);
    position: relative;
}

/* 右侧面板 - 固定在右边 */
.right-panels {
    /* 设置固定宽度范围，但允许弹性 */
    flex: 0 0 auto;
    width: 19.1%;
    /* 基础宽度为19.1% - 黄金分割比例 */
    min-width: 240px;
    max-width: 380px;

    overflow-y: auto;
    overflow-x: hidden;
    /* 明确隐藏水平滚动 */
    padding-left: 8px;
    /* 给隐藏的滚动条留出空间 */

    /* 完全隐藏滚动条 - 针对所有浏览器 */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */

    background-size: 100% 40px, 100% 40px;
    background-repeat: no-repeat;
    background-attachment: local, local;

    /* 添加渐变边框效果 */
    position: relative;
}

/* 专业页面的容器样式重置 */
.main-content>.video-monitor-view,
.main-content>.broadcast-schedule-view,
.main-content>.data-governance-view {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: -1.5rem;
    width: calc(100%);
    height: calc(100% + 3rem);
}

/* 左侧面板优化 */
.left-panels::-webkit-scrollbar {
    width: 0px;
    background: transparent;
    display: none;
}

.left-panels::-webkit-scrollbar-track {
    background: transparent;
    display: none;
}

.left-panels::-webkit-scrollbar-thumb {
    background: transparent;
    display: none;
}

/* 左侧面板滚动指示器 */
.left-panels::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(0, 255, 136, 0.2) 20%,
            rgba(0, 255, 136, 0.4) 50%,
            rgba(0, 255, 136, 0.2) 80%,
            transparent 100%);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.left-panels:hover::before {
    opacity: 1;
}

/* 添加滚动时的微妙指示 */
.left-panels::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 2px;
    width: 6px;
    height: 30px;
    background: linear-gradient(135deg,
            rgba(0, 255, 136, 0.6),
            rgba(0, 188, 212, 0.4));
    border-radius: 3px;
    opacity: 0;
    transform: translateY(0);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 11;
    box-shadow: 0 2px 8px rgba(0, 255, 136, 0.3);
}

.left-panels:hover::after {
    opacity: 0.8;
    transform: translateY(10px);
}

/* 滚动状态样式 */
.left-panels.scrolling,
.right-panels.scrolling {
    /* 滚动时增强背景效果 */
    background:
        /* 顶部阴影加强 */
        linear-gradient(rgba(0, 255, 136, 0.15) 20%, rgba(0, 255, 136, 0)) top,
        /* 底部阴影加强 */
        linear-gradient(rgba(0, 255, 136, 0), rgba(0, 255, 136, 0.15) 80%) bottom;
    background-size: 100% 60px, 100% 60px;
    background-repeat: no-repeat;
    background-attachment: local, local;
}

.left-panels.scrolling::before,
.right-panels.scrolling::before {
    opacity: 1;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(0, 255, 136, 0.4) 10%,
            rgba(0, 255, 136, 0.8) 50%,
            rgba(0, 255, 136, 0.4) 90%,
            transparent 100%);
    animation: scrollIndicator 0.8s ease-in-out;
}

.left-panels.scrolling::after,
.right-panels.scrolling::after {
    opacity: 1;
    transform: translateY(20px) scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 255, 136, 0.5);
}

/* 滚动指示器动画 */
@keyframes scrollIndicator {
    0% {
        background-size: 100% 0%;
    }

    50% {
        background-size: 100% 100%;
    }

    100% {
        background-size: 100% 80%;
    }
}

/* 面板内容滚动时的额外效果 */
.left-panels.scrolling .data-panel,
.right-panels.scrolling .profile-panel {
    border-color: rgba(0, 255, 136, 0.4);
    background: rgba(0, 255, 136, 0.06);
    transition: all 0.2s ease;
}

/* 滚动时的微妙光效 */
.left-panels.scrolling::after {
    background: linear-gradient(135deg,
            rgba(0, 255, 136, 0.8),
            rgba(0, 188, 212, 0.6),
            rgba(255, 255, 255, 0.3));
}

.right-panels.scrolling::after {
    background: linear-gradient(45deg,
            rgba(0, 255, 136, 0.8),
            rgba(0, 188, 212, 0.6),
            rgba(255, 255, 255, 0.3));
}

/* 添加平滑的焦点状态 */
.left-panels:focus-within,
.right-panels:focus-within {
    outline: none;
}

.left-panels:focus-within::before,
.right-panels:focus-within::before {
    opacity: 0.6;
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {

    0%,
    100% {
        background: linear-gradient(to bottom,
                transparent 0%,
                rgba(0, 255, 136, 0.2) 20%,
                rgba(0, 255, 136, 0.4) 50%,
                rgba(0, 255, 136, 0.2) 80%,
                transparent 100%);
    }

    50% {
        background: linear-gradient(to bottom,
                transparent 0%,
                rgba(0, 255, 136, 0.3) 20%,
                rgba(0, 255, 136, 0.6) 50%,
                rgba(0, 255, 136, 0.3) 80%,
                transparent 100%);
    }
}

/* 提升滚动性能的GPU加速 - 简化设置 */
.left-panels,
.right-panels {
    /* 基础GPU加速，避免过度优化 */
    transform: translateZ(0);
    /* 移除可能影响滚动的属性 */
    /* will-change: scroll-position; */
    /* -webkit-transform: translateZ(0); */
    /* backface-visibility: hidden; */
    /* -webkit-backface-visibility: hidden; */
}

/* 面板项目的滚动优化 - 简化 */
.data-panel,
.profile-panel {
    /* 移除可能影响滚动父容器的transform */
    /* will-change: transform; */
    /* transform: translateZ(0); */
}

.data-overview {
    height: 100%;
}

.overview-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary-green);
    text-align: center;
    margin: 0 0 1.5rem 0;
    padding: 1rem;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    text-shadow: 0 0 15px var(--primary-green);
}

.data-panels {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* 添加内边距为hover效果留出空间 */
    padding: 2px 4px;
}

.data-panel {
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.2rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    min-height: 200px;
    position: relative;
    overflow: hidden;
}

.data-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-green), var(--water-blue));
    opacity: 0.7;
}

.data-panel:hover {
    background: rgba(0, 255, 136, 0.12);
    border-color: var(--primary-green);
    transform: scale(1.01);
    box-shadow:
        inset 0 0 15px rgba(0, 255, 136, 0.1),
        0 2px 15px rgba(0, 255, 136, 0.15);
}

/* 隐藏面板标题 */
.panel-title {
    display: none;
}

.panel-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* 地图容器样式 */
.map-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.map-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 80px;
}

/* 地图底部控制菜单 */
.map-bottom-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(0, 255, 136, 0.05);
    border-top: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
}

.control-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.6rem 1rem;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 70px;
    backdrop-filter: blur(5px);
}

.control-item:hover,
.control-item.active {
    background: rgba(0, 255, 136, 0.2);
    border-color: var(--primary-green);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 255, 136, 0.3);
}

.control-icon {
    width: 20px;
    height: 20px;
    color: var(--primary-green);
}

.control-item span {
    font-size: 0.8rem;
    color: #ffffff;
    white-space: nowrap;
}

/* 右侧游客图谱 */
.right-panels::-webkit-scrollbar {
    width: 0px;
    background: transparent;
    display: none;
}

.right-panels::-webkit-scrollbar-track {
    background: transparent;
    display: none;
}

.right-panels::-webkit-scrollbar-thumb {
    background: transparent;
    display: none;
}

/* 右侧面板滚动指示器 */
.right-panels::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(0, 255, 136, 0.2) 20%,
            rgba(0, 255, 136, 0.4) 50%,
            rgba(0, 255, 136, 0.2) 80%,
            transparent 100%);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.right-panels:hover::before {
    opacity: 1;
}

/* 添加滚动时的微妙指示 */
.right-panels::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 2px;
    width: 6px;
    height: 30px;
    background: linear-gradient(45deg,
            rgba(0, 255, 136, 0.6),
            rgba(0, 188, 212, 0.4));
    border-radius: 3px;
    opacity: 0;
    transform: translateY(0);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 11;
    box-shadow: 0 2px 8px rgba(0, 255, 136, 0.3);
}

.right-panels:hover::after {
    opacity: 0.8;
    transform: translateY(10px);
}

.visitor-profile {
    height: 100%;
}

.profile-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary-green);
    text-align: center;
    margin: 0 0 1.5rem 0;
    padding: 1rem;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    text-shadow: 0 0 15px var(--primary-green);
}

.profile-panels {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* 添加内边距为hover效果留出空间 */
    padding: 2px 4px;
}

.profile-panel {
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.2rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    min-height: 150px;
    position: relative;
    overflow: hidden;
}

.profile-panel::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--primary-green), var(--water-blue));
    opacity: 0.7;
}

.profile-panel:hover {
    background: rgba(0, 255, 136, 0.12);
    border-color: var(--primary-green);
    transform: scale(1.01);
    box-shadow:
        inset 0 0 15px rgba(0, 255, 136, 0.1),
        -2px 0 15px rgba(0, 255, 136, 0.15);
}

/* 针对1680*1050分辨率的优化 */
@media screen and (max-width: 1680px) and (max-height: 1050px) {
    .main-content {
        /* 保持flex布局 */
        display: flex;
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .data-panel {
        padding: 1rem;
        min-height: 180px;
    }

    .data-panels {
        gap: 0.8rem;
    }
}

/* 响应式设计 */
@media screen and (max-width: 1600px) {
    .main-content {
        /* 保持flex布局 */
        display: flex;
        gap: 1.2rem;
        padding: 1.2rem;
    }
}

@media screen and (max-width: 1366px) {
    .main-content {
        /* 保持flex布局 */
        display: flex;
        gap: 1rem;
        padding: 1rem;
    }

    .top-header {
        padding: 0 1.5rem;
    }
}

@media screen and (max-width: 1200px) {
    .main-content {
        /* 小屏幕下改为垂直布局 */
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .left-panels,
    .right-panels {
        flex: 0 0 auto;
        width: 100%;
        max-height: 300px;
        min-width: unset;
        max-width: unset;
    }

    .center-area {
        flex: 1 1 auto;
        min-height: 400px;
    }
}

/* 添加超小屏幕的适配 */
@media screen and (max-width: 1024px) {
    .main-content {
        /* 平板设备：调整左右面板宽度 */
        display: flex;
        gap: 0.8rem;
        padding: 1rem;
    }

    .left-panels,
    .right-panels {
        width: 28%;
        /* 平板设备适配黄金比例 */
        min-width: 220px;
        max-width: 320px;
    }
}

@media screen and (max-width: 768px) {
    .main-content {
        /* 移动设备完全垂直布局 */
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .left-panels,
    .right-panels {
        flex: 0 0 auto;
        width: 100%;
        max-height: 250px;
        min-width: unset;
        max-width: unset;
        overflow-y: auto;
    }

    .center-area {
        flex: 1 1 auto;
        min-height: 300px;
    }
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes glow {

    0%,
    100% {
        box-shadow:
            0 4px 20px rgba(0, 255, 136, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    50% {
        box-shadow:
            0 8px 30px rgba(0, 255, 136, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

.data-panel,
.profile-panel,
.nav-item {
    animation: slideInLeft 0.6s ease-out;
}

.data-panel:nth-child(1) {
    animation-delay: 0.1s;
}

.data-panel:nth-child(2) {
    animation-delay: 0.2s;
}

.data-panel:nth-child(3) {
    animation-delay: 0.3s;
}

/* 呼吸灯效果 */
.data-panel:hover {
    animation: glow 2s ease-in-out infinite;
}

/* 数据可视化通用样式 */
.chart-container {
    width: 100%;
    height: 100%;
    min-height: 120px;
}

.data-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 255, 136, 0.1);
    transition: all 0.3s ease;
}

.data-item:hover {
    background: rgba(0, 255, 136, 0.05);
    padding-left: 0.5rem;
    border-radius: 4px;
}

.data-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.data-item:hover .data-label {
    color: rgba(255, 255, 255, 0.95);
}

.data-value {
    color: var(--primary-green);
    font-weight: 600;
    text-shadow: 0 0 10px var(--primary-green);
    transition: all 0.3s ease;
}

.data-item:hover .data-value {
    color: #ffffff;
    text-shadow: 0 0 15px var(--primary-green);
    transform: scale(1.05);
}

/* 进度条样式 */
.progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
    animation: pulse-bg 2s ease-in-out infinite;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-green), var(--water-blue));
    border-radius: 3px;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
    animation: progress-shine 3s ease-in-out infinite;
}

@keyframes pulse-bg {

    0%,
    100% {
        width: 0%;
    }

    50% {
        width: 100%;
    }
}

@keyframes progress-shine {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}
</style>